<template>
  <div>
    <van-nav-bar
      title="地址列表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="content">
      <div v-if="list.length">
      <van-address-list
        v-model="isDefault"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="changeContact"
      />
      </div>
      <van-empty v-else description="空空如也" >
         <van-button round type="danger" @click="onAdd" class="bottom-button">添加地址</van-button>
      </van-empty>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'contactList',
  data () {
    return {
      isDefault: '-1'
    }
  },
  created () {
    this.init()
  },
  methods: {
    changeContact (item) {
      this.$store.commit('Order/change_contact', item)
      this.$router.replace('/order')
    },
    init () {
      if (this.list.findIndex(el => el.isDefault) !== -1) {
        this.isDefault = this.list[this.list.findIndex(el => el.isDefault)].id
      }
    },
    onClickLeft () {
      this.$router.push('/order')
    },
    onAdd () {
      this.$router.push('/contactadd')
    },
    onEdit (item) {
      this.$router.push(`/contactedit/${item.id}`)
    }
  },
  computed: {
    ...mapState({
      list: (state) => JSON.parse(JSON.stringify(state.Address.data))
    })
  }
}
</script>

<style lang="scss" scoped>
.van-address-list{
  margin-bottom: 50px;
}
.bottom-button {
    width: 160px;
    height: 40px;
  }
</style>
